<template>
    <div class="hege">
        <section class="hz-head">
            <div><input class="s-input" type="text" name="" id="trigger" placeholder="请选择片区" v-model="form.areaName" @focus="stopFocus1"></div>
            <div></div>
            <div><input class="s-input" type="text" ref="date1" placeholder="请选择起始日期" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus2" v-model="form.startTime" /></div>
            <div><input class="s-input" type="text" ref="date2" placeholder="请选择截止日期" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus3" v-model="form.endTime" /></div>
        </section>
        <section class="hz-table">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>片区</th>
                        <th>未达标情况</th>
                        <th>标准</th>
                        <th>录入时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.value">
                        <td>{{item.sysArea.areaName}}</td>
                        <td>{{item.sysSite.siteName}}：{{item.waterQualityBasic.wqName}}{{item.recordValue}}</td>
                        <td>{{item.waterQualityBasic.wqName}}：{{item.waterQualityBasic.wqLimitvalue}}</td>
                        <td>{{getDaytime(item.wqTime)}}</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
</template>

<script>
import MobileSelect from 'mobile-select'
export default {
    data() {
        return {
            mobileSelect: '',
            calendardatetime1: '',
            calendardatetime2: '',
            form: {
                pageNum: '1',
                pageSize: 10,
                areaId: '',
                areaName: '',
                startTime: '',
                endTime: '',
                qual: '1',
            },
            arealist: [],
            list: []
        }
    },
    mounted() {
        this.getarealist()
        this.getList(() => { })
    },
    watch: {
        'form.areaName'() {
            this.getList(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        },
        'form.startTime'() {
            this.getList(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        },
        'form.endTime'() {
            this.getList(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        }
    },
    methods: {
        //取消默认操作,加载下拉
        stopFocus1() {
            var that = this
            document.activeElement.blur();
            if (!this.mobileSelect) {
                this.mobileSelect = new MobileSelect({
                    trigger: "#trigger",
                    // title: "单项选择",
                    wheels: [
                        {
                            data: this.arealist
                        }
                    ],
                    keyMap: {
                        id: 'areaId',
                        value: 'areaName'
                    },
                    callback: function (indexArr, data) {
                        // console.log(data)
                        that.form.areaId = data[0].areaId
                        that.form.areaName = data[0].areaName
                    }
                })
            }
        },
        stopFocus2() {
            document.activeElement.blur();
            if (!this.calendardatetime1) {
                this.calendardatetime1 = new lCalendar()
                this.calendardatetime1.init({
                    'trigger': this.$refs.date1,
                    'type': 'date'
                });
            }
        },
        stopFocus3() {
            document.activeElement.blur();
            if (!this.calendardatetime2) {
                this.calendardatetime2 = new lCalendar()
                this.calendardatetime2.init({
                    'trigger': this.$refs.date2,
                    'type': 'date'
                });
            }
        },
        //片区列表
        getarealist() {
            this.$api.huizong.arealist().then(res => {
                if (res.success) {
                    this.arealist = res.data
                }
            })
        },
        //水质总汇
        getList(callback) {
            this.$api.huizong.waterChesks(this.form).then(res => {
                if (res.success) {
                    this.list = res.data.list
                    callback()
                }
            })
        },
        //截取时间
        getDaytime(time) {
            return time.substring(0, 10)
        }
    }
}
</script>

<style>
</style>
